{% extends "service_log/sl_base.html" %}

{% load listable %}
{% load static %}
{% load i18n %}

{% block head_title %}{{ page_title }}{% endblock %}

{% block extra_css %}
  {{ block.super }}
  <link href="{% static "datepicker/css/bootstrap-datepicker.min.css" %}?v={{VERSION}}" rel="stylesheet">
  <link href="{% static "multiselect/css/bootstrap.multiselect.css" %}?v={{VERSION}}" rel="stylesheet">
  <link href="{% static "daterangepicker/css/daterangepicker.css" %}?v={{VERSION}}" rel="stylesheet">
  <link href="{% static "qatrack_core/css/tables.css" %}?v={{CSS_VERSION}}" rel="stylesheet">
  <link href="{% static "qatrack_core/css/custom-daterangepicker.css" %}?v={{CSS_VERSION}}" rel="stylesheet">
{% endblock extra_css %}

{% block extra_js %}
  {% autoescape off %}
    {% listable view_name dom="<'row'<'col-sm-5'i><'col-sm-7'p>><'row'<'col-sm-12'tr>><'row'<'col-sm-5'><'col-sm-7'p>>" requirejs=True pagination_type='bootstrap3' css_table_class='table-hover table-condensed table-custom-listable' css_input_class='btn-flat btn-sm input-sm full-width' auto_width=False %}
  {% endautoescape %}
{% endblock %}

{% block require_javascript %}
  require(['listable'{% if bulk_review %}, 'faultsbulkreview'{% endif %}]);
{% endblock require_javascript %}

{% block body %}

<div class="row">
  <div class="col-md-12">
    <div class="box">
      <div class="box-header">
        <i class="fa {{ icon }} fa-fw" aria-hidden="true"></i>
        <h3 class="box-title">{{ page_title }}</h3>

      </div>
      <div class="box-body pad">
        {{ listable_table }}

        {% if perms.faults.can_review and bulk_review %}
          <div class="row pad"></div>
          <div class="row">
            <div class="col-sm-12">

              <button id="submit-review"
                      type="button"
                      class="btn btn-primary btn-flat pull-right margin-r-5"
                      title="{% trans "Click to update the review status of the selected faults" %}"
                      data-toggle="modal"
                      data-target="#bulk-review-modal"

              >
                <i class="fa fa-save"></i>
                {% trans "Approve Selected Faults" %}
              </button>
            </div>
          </div>
        {% endif %}
      </div>
    </div>
  </div>
</div>

{% if bulk_review %}
<div id="bulk-review-modal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">{% trans "Confirm Bulk Review" %}</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-sm-12">
            <p>{% trans "You are about to update the review status for all the following faults" %}</p>
            <form class="form">
              <div class="form-group">
                <table id="instance-summary" class="table table-bordered table-striped table-condensed fixed">
                  <thead>
                    <tr>
                      <th>{% trans "Fault" %}</th>
                      <th>{% trans "Unit" %}</th>
                      <th>{% trans "# of Faults" %}</th>
                    </tr>
                  </thead>
                  <tbody>
                  </tbody>
                </table>
              </div>
              <p id="bulk-review-msg"></p>
            </form>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">{% trans "Cancel" %}</button>
        <a id="confirm-update" type="button" class="btn btn-primary">{% trans "Confirm" %}</a>
        {% csrf_token %}
      </div>
    </div>
  </div>
</div>
{% endif %}
{% endblock body %}
